// 协同任务-里程牌设置
<template>
  <div v-if="showStageList" class="radius-container">
    <div class="border-b pad-10 font-w font-15">里程牌设置</div>
    <el-form class="mar-t-20" label-width="80px">
      <el-form-item label-width="150px" v-bind:label=" '第' + (index + 1) + '阶段：' " v-for="(stage, index) in stageList" :key="stage.key">
        <el-input placeholder="请输入阶段名称，如：完成原型设计后，2日内支付" class="el-input" v-model="stage.stageName"></el-input>
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="请选择验收日期" v-model="stage.acceptDate"></el-date-picker>
        <el-input  placeholder="验收通过后支付的金额" class="el-input" v-model="stage.acceptAmount"> <template slot="append">元</template></el-input>
        <el-input v-model="stage.sortNo" :value="index+1" type="hidden"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
  .el-input{
    width: 20%
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>

<script>
  export default {
    props: {
      //  任务id
      taskId: {
        type: String
      }
    },
    data() {
      return {
        showStageList: false,
        stageList: [{
          sortNo: 1,
          stageName: '',
          acceptDate: '',
          acceptAmount: ''
        }, {
          sortNo: 2,
          stageName: '',
          acceptDate: '',
          acceptAmount: ''
        }, {
          sortNo: 3,
          stageName: '',
          acceptDate: '',
          acceptAmount: ''
        }]
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      const that = this
      this.$bus.$on('project.task.edit.taskType', function(taskType) {
        that.showStageList = taskType * 1 === 2
      })
      this.$bus.$on('project.task.edit.taskData', function(taskData) {
        const taskType = taskData.taskType + ''
        if (taskType !== '2') {
          return
        }
        for (let i = 0; i < that.stageList.length; i++) {
          if (taskData.stageList[i]) {
            that.stageList[i] = taskData.stageList[i]
          }
        }
      })
      this.init()
    },
    methods: {
      init() {
        if (!this.taskId) {
          return
        }
      },
      // 获取里程牌列表
      getStageList() {
        const stages = []
        this.stageList.forEach(stage => {
          if (stage.stageName && stage.acceptDate && stage.acceptAmount) {
            stages.push(stage)
          }
        })
        return stages
      }
    },
    mounted() {
    }
  }
</script>
